<template>
  <div class="cart-item" v-if="Object.keys(product).length !== 0">
     <div class="item-select">
       <check-button  :isChecked="product.checked" @click.native="checkedChange"></check-button>
     </div>
     <div class="item-img">
       <img :src="product.image" alt="商品图片">
     </div>
     <div class="item-info">
       <div class="item-title">{{product.title}}</div>
       <div class="item-desc">{{product.desc}}</div>
       <div class="info-bottom">
         <div class="item-price">￥{{product.price}}</div>
         <div class="item-count">x{{product.count}}</div>
       </div>
     </div>
  </div>
</template>

<script>
  import CheckButton from './CheckButton.vue'

  export default {
    name:"CartListItem",
    props:{
      product:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    components:{
      CheckButton
    },
    methods:{
      checkedChange(){
        this.product.checked = !this.product.checked
      }
    }
  }
  
</script>

<style scoped>
   .cart-item {
     width: 100%;
     display: flex;
     font-size: 0;
     padding: 5px;
     border-bottom: 1px solid #ccc;
   }

   .item-img {
     padding: 5px;
   }

   .item-img img {
     width: 95px;
     height: 120px;
     border-radius: 5px;
   }

   .item-info {
     font-size: 20px;
     color:#333;
     padding: 5px 10px;
     position: relative;
     overflow: hidden;
     width: 100%;
   }
  
   .item-info .item-title,.item-info .item-desc {
     /* //单行省略号 其父盒子确定要有宽度*/
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }

   .item-info .item-desc {
     font-size: 18px;
     color: #666;
     margin-top: 15px;
     font-weight: 550;
   }

   .item-info .item-title {
     font-weight: 600;
   }

   .info-bottom {
     margin-top: 10px;
     position: absolute;
     bottom: 10px;
     left: 10px;
     right: 10px;
   }

   .info-bottom .item-price {
      float: left;
      color: orangered;
      font-weight: 550;
   }

   .info-bottom .item-count {
     float: right;
     font-weight: 550;
   }

   .item-select {
     width: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
</style>